import React, { Component } from "react";
// ANTD
import { Form, Input, Button, Row, Col } from 'antd';
import { UserOutlined, UnlockOutlined } from '@ant-design/icons';
import Code from "../../components/code/index";
//Api
import {register} from "../../api/account";
//加密
import CryptoJs from 'crypto-js';
import {reg_password} from "../../utils/validate";

class RetisterForm extends Component{
    constructor(props){
        super(props);
        this.state = {
            username: "",
            password: "",
            code: "",
            module: "register"
        };
    }
    onFinish = values => {
        values.password = CryptoJs.MD5(values.password).toString();
        register(values).then(e=>{
            this.props.switchForm("login");
        }).catch(e=>{
            console.log(e)
        })
    }
    toggleForm = () => {
        // 调父级的方法
        this.props.switchForm("login");
    }
    //处理用户输入
    changeUserForm = (e,type)=>{
        console.log(e,type);
        this.setState({
            ...this.state,
            [type]:e.target.value
        })
    }
    render(){
        const { username, module } = this.state;
        return (
            <div>
                <div className="form-header">
                    <h4 className="column">注册</h4>
                    <span className={'finger'} onClick={this.toggleForm}>登录</span>
                </div>
                <div className="form-content">
                    <Form
                    name="normal_login"
                    initialValues={{ remember: true }}
                    onFinish={this.onFinish}
                    >
                        <Form.Item name="username" rules={[
                            { required: true, message: "邮箱不能为空！！" },
                            { type: "email", message: "邮箱格式不正确"}
                        ]} >
                            <Input onChange={e=>this.changeUserForm(e,'username')} prefix={<UserOutlined className="site-form-item-icon" />} placeholder="请输入邮箱" />
                        </Form.Item>
                        <Form.Item name="password" rules={[
                            { required: true, message: "密码不能为空！！" },
                            ({ getFieldValue }) => ({
                                validator(role, value){
                                    let passwords_value = getFieldValue("passwords"); // 获取再次输入密码的值
                                    if(passwords_value && value !== passwords_value) {
                                        return Promise.reject("两次密码不一致")
                                    }
                                    return Promise.resolve();
                                }
                            })
                        ]} >
                            <Input onChange={e=>this.changeUserForm(e,'password')} type="password"  prefix={<UnlockOutlined className="site-form-item-icon" />} placeholder="请输入密码" />
                        </Form.Item>
                        <Form.Item name="passwords" rules={[
                            { required: true, message: "再次确认密码不能为空！！" },
                            ({ getFieldValue }) => ({
                                validator(role, value){
                                    if(value !== getFieldValue("password")){
                                        return Promise.reject("两次密码不一致")
                                    }
                                    return Promise.resolve();
                                }
                            })
                        ]} >
                            <Input onChange={e=>this.changeUserForm(e,'passwords')} type="password" prefix={<UnlockOutlined className="site-form-item-icon" />} placeholder="请再次输入密码" />
                        </Form.Item>
                        <Form.Item name="code" rules={[
                            { required: true, message: '密码不能为空' },
                            {pattern:reg_password,message: '密码必须大于6位小于20位，数字+字母'}
                        ]} >
                            <Row gutter={13}>
                                <Col span={15}>
                                    <Input onChange={e=>this.changeUserForm(e,'code')} prefix={<UnlockOutlined className="site-form-item-icon" />} placeholder="请输入验证码" />
                                </Col>
                                <Col span={9}>
                                    <Code username={username} module={module} />
                                </Col>
                            </Row>
                        </Form.Item>
                        <Form.Item>
                            <Button type="primary" htmlType="submit" className="login-form-button" block> 注册 </Button>
                        </Form.Item>
                    </Form>
                </div>
            </div>
        )
    }
}

export default RetisterForm;
